<style scoped lang="less">
page,
.page__bd {
  height: 100%;
}
.page__bd {
  padding-bottom: 0;
}
// 概览
.preview {
  background: white;
  margin-bottom: 10px;
  &-title {
    // 面板部分
    display: flex;
    padding: 10px;
    align-items: center;
    &__pic {
      width: 30px;
      height: 30px;
      margin-right: 4px;
      background: purple;
    }
    &__txt {
      flex: 1;
      &-sub {
        font-size: 12px;
        display: flex;
        align-items: center;
        color: #999;
        .time {
          margin-left: 4px;
        }
        .view {
          margin-left: 4px;
        }
      }
    }
    &__status {
      border: 1px solid #3399ff;
      border-radius: 4px;
      padding: 0 3px;
      font-size: 12px;
      color: #3399ff;
    }
  }
  &-grid {
    // 格子
    display: flex;
    text-align: center;
    overflow: hidden;
    &__item {
      flex: 1;
      position: relative;
      font-size: 14px;
      padding: 15px 0;
      &:after {
        content: '';
        position: absolute;
        top: 20%;
        left: -1px;
        height: 60%;
        border: 1rpx solid #eaeaea;
      }
      &-label {
        color: #999;
      }
      &-txt {
      }
    }
  }
  &-more {
    // 更多
    display: flex;
    border-top: 1px solid #f5f5f5;
    padding: 8px 10px;
    font-size: 12px;
    align-items: center;
    &__tel {
      flex: 1;
      display: flex;
      align-items: center;
      &-icon {
        margin-right: 4px;
      }
    }
    &__link {
      display: flex;
      align-items: center;
    }
  }
}
.swiper {
  background: white;
  &-title {
    padding-left: 10px;
    padding-bottom: 4px;
    padding-top: 4px;
    border-bottom: #eaeaea solid 1px;
  }
}
// 各个公司模块样式
.weui {
  &-grids {
    border: none;
    overflow: hidden;
    background: white;
  }
  &-grid {
    border-right: none;
    margin-bottom: -1px;
    position: relative;
    width: 25%;
    &:after {
      content: ' ';
      position: absolute;
      left: -1px;
      top: 20%;
      height: 60%;
      width: 0;
      border-left: 1rpx solid #eaeaea;
    }
    &__label {
      color: #bbb;
    }
    &__icon {
      font-size: 30px;
      margin-bottom: 10px;
      color: #bbb;
    }
    &.active {
      .weui-grid__label {
        color: #555;
      }
      .weui-grid__icon {
        color: #3399ff;
      }
    }
    .count {
      position: absolute;
      top: 25px;
      right: 15px;
      font-size: 10px;
      color: #cdcdcd;
    }
  }
}

.panel {
  // 面板样式
  margin-bottom: 10px;
  &-title {
    display: flex;
    padding: 10px;
    border-bottom: 0.1px solid #eaeaea;
    background: white;
    align-items: center;

    &__label {
      font-size: 16px;
      align-items: center;
    }
    &__value {
      flex: 1;
      display: flex;
    }
  }
  &-content {
    margin-bottom: 10px;
    background: white;

    &__item {
      display: flex;
      // padding: 10px 10px 0 10px;
      font-size: 14px;
      &-label {
        color: #666;
      }
      &-value {
        flex: 1;
        color: #333;
      }
    }
  }
}

.small {
  font-size: 13px;
  color: #999;
  margin-left: 10px;
}
.scroll {
  text-align: left;
  white-space: nowrap;
  overflow-x: scroll;
  font-size: 0;
  letter-spacing: 0;
  padding: 10px;
  &-inline {
    vertical-align: top;
    display: inline-block;
    width: 150px;
    margin-right: 10px;
  }
}
.login {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999999;
}
</style>

<template>
  <!-- search on loading -->
  <div>
    <div v-if="loading" class="weui-loadmore loading" :class="{active:loading}">
      <div class="weui-loading"></div>
      <div class="weui-loadmore__tips">正在加载</div>
    </div>
    <div v-else>

      <div class="page" v-if="Company&&Company.Name">
        <div class="page__bd">
          <!-- 公司概览 -->
          <div class="preview">
            <div class="preview-title">
              <img class="preview-title__pic" :src="Company.ImageUrl&&Company.ImageUrl" alt="">
              <div class="preview-title__txt">
                <div class="preview-title__txt-main">{{Company.Name||'-'}}</div>
                <div class="preview-title__txt-sub">
                  <!-- <icon type="waiting" size="12" /> -->
                  <i class="iconfont icon-time" />
                  <span class="time">更新时间：{{Company.UpdatedDate||'-'}}</span>
                  <i class="iconfont icon-liulan" style="margin-left:20px" />
                  <span class="view">浏览量：{{CountInfo.ViewCount||0}}</span>
                </div>
              </div>
              <!-- <span class="preview-title__status">{{Company.ShortStatus}}</span> -->
              <status :status="Company.ShortStatus" />
            </div>

            <div class="preview-grid">
              <div class="preview-grid__item">
                <div class="preview-grid__item-label">法定代表人</div>
                <div class="preview-grid__item-txt">{{Company.Oper.Name||'-'}}</div>
              </div>
              <div class="preview-grid__item">
                <div class="preview-grid__item-label">注册资本</div>
                <div class="preview-grid__item-txt">
                  <money :money="Company.RegistCapi"></money>
                </div>
              </div>
              <div class="preview-grid__item">
                <div class="preview-grid__item-label">成立时间</div>
                <div class="preview-grid__item-txt">{{Company.StartDate||'-'}}</div>
              </div>
            </div>

            <div class="preview-more">
              <div class="preview-more__tel">
                <!-- <icon class="preview-more__tel-icon"> -->
                <div class="preview-more__tel-icon">
                  <i class=" iconfont icon-dadianhua" />
                </div>

                <!-- </icon> -->
                <div class="preview-more__tel-num">{{Company.ContactInfo.PhoneNumber||'-'}}</div>
                <!-- <div class="preview-more__tel-more">更多号码（2）</div> -->
                <!-- <div class="preview-more__fapiao">发票抬头</div> -->
                <invoice content="发票抬头" :unique="Company.Unique"></invoice>
              </div>
              <div class="preview-more__link">
                <div class="preview-more__link-txt" @click="showMore">更多信息</div>
                <i class="iconfont icon-more" />
                <!-- <icon type="success" size="14"></icon> -->
              </div>
            </div>
          </div>

          <!-- 股东-主要人员 -->
          <div class="panel">
            <!-- title -->
            <div class="panel-title" @click="moreGudong">
              <div class="panel-title__label">股东高管</div>
              <div class="panel-title__value">
                <div class="small">股东（{{Company.Partners.length||'-'}}）</div>
                <div class="small">高管（{{Company.Employees.length||'-'}}）</div>
              </div>
              <div class="panel-title__right">
                <i class="iconfont icon-more"></i>
              </div>
            </div>
            <!-- content -->
            <div class="panel-content">
              <div class="panel-content__item">
                <scroll-view class="scroll" scroll-x="true">
                  <template v-for="(item, index) in gudong" wx:key="unique">
                    <div class="scroll-inline" :key="index">
                      <gudong :item="item"></gudong>
                    </div>
                    <!-- <div class="scroll-inline" :key="index" v-if="index<5">
                    <gudong :item="item" v-if="index<5"></gudong>
                  </div> -->
                  </template>
                </scroll-view>
              </div>
            </div>
          </div>

          <van-tabs :active="active" swipeable animated>
            <van-tab v-for="(item, index) in items" :key="index" :title="item.title">
              <div class="weui-grids">
                <block v-for="(item1,index1) in item['children']" :key="index1">
                  <div :class="['weui-grid',{active:item1.count!==0}]" hover-class="weui-grid_active" @click="clickItem(item1)">
                    <i :class="['weui-grid__icon','iconfont',item1.icon]" />
                    <div class="weui-grid__label">{{item1.name||'-'}}</div>
                    <span class="count">{{item1.count>0?item1.count:''}}</span>
                  </div>
                </block>
              </div>
            </van-tab>
          </van-tabs>

          <!-- <scroll-tab v-if="tabs" :tabs="tabs" :activeIndex="activeIndex" @indexChange="indexChange"></scroll-tab>
        <swiper class="swiper" :style="swiperStyle" @change="swiperChange" :current="activeIndex">
          <swiper-item v-for="(item, index) in items" :key="index" class="weui-tab__content">
            <template v-if="item.children&&item.children.length>0">
              <div class="weui-grids">
                <block v-for="(item1,index1) in item['children']" :key="index1">
                  <div :class="['weui-grid',{active:item1.count!==0}]" hover-class="weui-grid_active" @click="clickItem(item1)">
                    <i :class="['weui-grid__icon','iconfont',item1.icon]" />
                    <div class="weui-grid__label">{{item1.name||'-'}}</div>
                    <span class="count">{{item1.count>0?item1.count:''}}</span>
                  </div>
                </block>
              </div>
            </template>
          </swiper-item>
        </swiper> -->
        </div>
      </div>

      <!-- 分享按钮 -->
      <button class="share" open-type='share'>
        <i class="iconfont icon-plus-share"></i>
      </button>

    </div>
    <!-- login -->
    <!-- <div class="login" v-if="toLogin">
      <login @setLogin="setLogin"></login>
    </div> -->
  </div>
</template>

<script>
// import Grids from './Grids';
// import ScrollTab from '@/components/ScrollTab';
import Money from '@/components/money';
import Status from '@/components/status';
import Load from '@/components/load';
import Gudong from './gudongPanel';
import py from '@/utils/py';
import Invoice from './invoice';
import Login from '@/pages/auth/login';

const sleep = async (duration = 2000) => {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, duration);
  });
};

export default {
  components: {
    // ScrollTab,
    Money,
    Status,
    Load,
    Gudong,
    Invoice,
    Login
  },
  data() {
    return {
      toLogin: false,
      loading: false,
      activeIndex: 0, // tab及页面索引
      items: [], // 格子数据列表
      Company: {}, // 公司信息
      CountInfo: {}, // 公司信息数量
      gudong: [] // 股东高管列表
    };
  },
  computed: {
    swiperStyle() {
      // 动态设置swiper高度
      if (this.items.length === 0) return;
      const tabItem = this.items[this.activeIndex || 0];
      if (!tabItem) return;
      const rows = Math.ceil(tabItem['children'].length / 4);
      return `height:${108 * rows + 38}px`;
    },
    tabs() {
      // 返回tab标题
      if (!Array.isArray(this.items)) return;
      return this.items.map(item => item.title);
    }
    // toLogin() {
    //   // 全局loading状态
    //   return this.$store.getters.showLogin;
    // }
  },
  onShow() {
    console.log('show get data');
    // 页面展示获取数据
    this.getDetail();
  },
  onUnload() {
    console.log('unload remove data');
    this.clear();
  },
  methods: {
    setLogin(value) {
      this.toLogin = value;
    },
    clear() {
      this.Company = {};
      this.CountInfo = {};
      this.items = {};
      this.activeIndex = 0;
      // this.$store.commit('setShowLogin', false);
      // this.$store.commit('setUserInfo', null);
    },
    swiperChange(e) {
      // swiper切换回调
      const index = e.target.current;
      this.indexChange(index);
    },
    indexChange(index) {
      // tab及内容索引改变
      this.activeIndex = index;
    },
    async clickItem(item) {
      // 格子点击
      if (item.count === 0) {
        wx.showToast({
          title: '无数据',
          icon: 'none',
          duration: 1000,
          mask: true
        });
        return;
      }

      if (item.vip === 1) {
        const userInfo = this.$store.getters.userInfo;
        if (!userInfo || !userInfo.userName) {
          wx.showToast({
            title: '请登陆后查看！',
            icon: 'none',
            duration: 1000,
            mask: true
          });
          await sleep(1500);

          let query = {
            ...this.$route.query,
            path: '/pages/company/main'
          };

          this.$router.push({
            path: '/pages/auth/login/main',
            query
          });

          return;
        }
        if (!userInfo || userInfo.isVip !== 1) {
          wx.showToast({
            title: 'VIP可见',
            icon: 'none',
            duration: 1000,
            mask: true
          });
          return;
        }
      }

      const pathName = py(item.name)[0].toLowerCase();

      const query = {
        searchKey: this.Company.Name, // 公司名称
        Unique: this.Company.Unique, //公司id
        Oper: JSON.stringify(this.Company.Oper), //法人信息
        CompanyCode: this.Company.CompanyCode, //公司编码
        pathName
      };

      this.$router.push({
        path: item.router || '/pages/detail/main',
        query
      });
    },
    async getDetail() {
      // 获取公司信息
      const unique =
        this.$root.$mp.page.options.unique ||
        'ed62f8e3abc5c548a381ecede999061a';
      let oldUnique = '';
      try {
        oldUnique = this.$store.getters.companyInfo.Company.Unique;
      } catch (error) {}

      // 公司信息相同时不重新获取数据
      if (oldUnique && unique === oldUnique) {
        this.setData(this.$store.getters.companyInfo);
        console.log('data from store');
        return;
      }
      const url = '/xcx/detail';
      const params = {
        unique: unique // 避免路由回退参数不更新
        // unique: '11eddf8966bbd38f36e3357161c14182' // 避免路由回退参数不更新
      };
      this.loading = true;
      const { status, message, result } = await this.$http.get(url, params);
      this.loading = false;
      if (status !== 200) {
        wx.showToast({
          title: message || '查询失败！',
          icon: 'none',
          duration: 2000
        });
        return;
      }
      this.setData(result);
      console.log('data from api');
    },
    setData(item) {
      // 各个公司模块信息
      this.items = [
        {
          title: '基本信息',
          children: [
            { name: '工商信息', icon: 'icon-gongshangdengji' },
            {
              name: '股东信息',
              count: item.subtitle.Partners.count,
              icon: 'icon-gudongxinxi',
              router: '/pages/base/gudong/main'
            },
            {
              name: '法定代表人',
              icon: 'icon-farenshenfenzheng',
              router: '/pages/base/faren/main'
            },
            {
              name: '主要人员',
              count: item.CountInfo.Admini,
              icon: 'icon-gudongxinxi',
              router: '/pages/base/zhuyao/main'
            },
            {
              name: '对外投资',
              count: item.CountInfo.InvesterCount,
              icon: 'icon-wodetouzi',
              router: '/pages/base/duiwai/main'
            },
            {
              name: '历史变更',
              count: item.subtitle.ChangeRecord.count,
              icon: 'icon-alter'
            },
            {
              name: '企业年报',
              count: item.CountInfo.AnnualReportCount,
              icon: 'icon-baobiao',
              router: '/pages/base/qiye/main'
            },
            {
              name: '企业评分',
              // count: item.CountInfo.AnnualReportCount,
              icon: 'icon-baobiao',
              router: '/pages/base/qiyepingfen/main'
            },
            {
              name: '附近公司',
              // count: item.CountInfo.AnnualReportCount,
              icon: 'icon-fujinkehu',
              router: '/pages/base/fujin/main'
            },
            {
              name: '最终受益人',
              // count: item.CountInfo.AnnualReportCount,
              icon: 'icon-farenshenfenzheng',
              router: '/pages/base/zuizhong/main',
              vip: 1
            }
            // {
            //   name: '最终受益人',
            //   count: item.subtitle.UltimateBeneficiary.count,
            //   icon: 'icon-shouyiren'
            // },
            // {
            //   name: '控股企业',
            //   count: item.CountInfo.HCCount,
            //   icon: 'icon-group53'
            // }
          ]
        },
        {
          title: '风险信息',
          children: [
            {
              name: '失信信息',
              count: item.CountInfo.ShiXinCount,
              icon: 'icon-gongshangshixin',
              router: '/pages/fengxian/shixin/main'
            },
            {
              name: '被执行人',
              count: item.CountInfo.ZhiXingCount,
              icon: 'icon-beizhixingrenxinxichaxun',
              router: '/pages/fengxian/zhixing/main'
            },
            {
              name: '法院公告',
              count: item.CountInfo.CTACount,
              icon: 'icon-fayuangonggao',
              router: '/pages/fengxian/fayuan/main'
            },
            {
              name: '裁判文书',
              count: item.CountInfo.JudgementCount,
              icon: 'icon-caipanwenshu',
              router: '/pages/fengxian/caipan/main'
            },
            {
              name: '经营异常',
              count: item.subtitle.Exceptions.count,
              icon: 'icon-jingyingyichang'
            },
            {
              name: '行政处罚',
              count: item.subtitle.Penalty.count,
              icon: 'icon-xingzhengfawu',
              router: '/pages/fengxian/xingzheng/main'
              // map xzcf
            },
            {
              name: '环保处罚',
              count: item.CountInfo.ENPCount,
              icon: 'icon-huanbaochufa',
              router: '/pages/fengxian/huanbao/main'
            },
            // {
            //   name: '抽查检查',
            //   // count: item.CountInfo.TenderCount,
            //   icon: 'icon-chouchajiancha'
            // 没有接口
            // },
            {
              name: '动产抵押',
              count: item.subtitle.MPledge.count,
              icon: 'icon-dongchandiya',
              router: '/pages/fengxian/dongchan/main'
            },
            {
              name: '土地抵押',
              count: item.subtitle.LandMortgage.count,
              icon: 'icon-cheliangdiyadengji',
              router: '/pages/fengxian/tudi/main'
            },
            {
              name: '开庭公告',
              count: item.CountInfo.CourtSessionAnnouncementCount,
              icon: 'icon-kaitinggonggao',
              router: '/pages/fengxian/kaiting/main'
            },
            {
              name: '司法拍卖',
              count: item.CountInfo.JudicialSaleCount,
              icon: 'icon-paimai',
              router: '/pages/fengxian/sifapaimai/main'
            },
            // {
            //   name: '司法协助',
            //   // count: item.CountInfo.HCCount,
            //   icon: 'icon-xiezhu'
            // 没有接口
            // },
            // {
            //   name: '简易注销',
            //   //  count: item.CountInfo.HCCount,
            //   icon: 'icon-zhuxiaologout10'
            // 没有接口
            // },
            // {
            //   name: '公示催告',
            //   count: item.CountInfo.HCCount,
            //   icon: 'icon-gongshichufa'
            // },
            {
              name: '税收违法',
              count: item.CountInfo.TiCount,
              icon: 'icon-shuishouweifa',
              router: '/pages/fengxian/shuishou/main'
            },
            {
              name: '股权出质',
              count: item.subtitle.Pledge.count,
              icon: 'icon-guquanchuzhi',
              router: '/pages/fengxian/guquan/main'
            },
            {
              name: '严重违法',
              count: item.subtitle.SeriousViolation.count,
              icon: 'icon-jingyingyichang',
              router: '/pages/fengxian/yanzhong/main'
            },
            {
              name: '欠税公告',
              count: item.CountInfo.OweTaxCount,
              icon: 'icon-qianshuigonggao',
              router: '/pages/fengxian/qianshui/main'
            }
          ]
        },
        {
          title: '经营信息',
          children: [
            {
              name: '招聘',
              count: item.CountInfo.RecruitCount,
              icon: 'icon-msnui-job',
              router: '/pages/other/zhaopin/main'
            },
            {
              name: '新闻',
              count: item.CountInfo.NewsCount,
              icon: 'icon-xinwen',
              router: '/pages/other/xinwen/main'
            },
            {
              name: '融资信息',
              // count: item.CountInfo.NewsCount,
              icon: 'icon-rongzi',
              router: '/pages/other/rongzi/main'
            },
            {
              name: '注册网站',
              count: item.CountInfo.WebCount,
              icon: 'icon-zhucewangzhan',
              router: '/pages/other/wangzhan/main'
            },
            {
              name: '产品信息',
              // count: item.CountInfo.WebCount,
              icon: 'icon-chanpin1',
              router: '/pages/other/chanpin/main'
            },
            {
              name: '招投标',
              // count: item.CountInfo.RecruitCount,
              icon: 'icon-zhaotoubiao',
              router: '/pages/other/zhaotoubiao/main'
            },
            {
              name: '进出口信用',
              // count: item.CountInfo.WebCount,
              icon: 'icon-jinchukouxinyong',
              router: '/pages/other/jinchukou/main'
            },
            {
              name: '行政许可',
              count: item.subtitle.AdministrativeLicense.count,
              icon: 'icon-gongshixuke',
              router: '/pages/other/xingzheng/main'
              // map xzxk
            },
            {
              name: '微信公众号',
              // count: item.subtitle.AdministrativeLicense.count,
              icon: 'icon-weixin',
              router: '/pages/other/weixin/main'
              // map xzxk
            },
            {
              name: '财务数据',
              // count: item.CountInfo.HCCount,
              icon: 'icon-caiwushuju',
              router: '/pages/other/caiwu/main'
            },
            {
              name: '财务信用',
              // count: item.CountInfo.HCCount,
              icon: 'icon-caiwushuju',
              router: '/pages/other/shuiwuxinyong/main'
            },
            {
              name: '专利',
              count: item.CountInfo.PatentCount,
              icon: 'icon-zhuanli',
              router: '/pages/other/zhuanli/main'
            },
            {
              name: '商标',
              count: item.CountInfo.SAICCount,
              icon: 'icon-qiyeshangbiao',
              router: '/pages/other/shangbiao/main'
            },
            {
              name: '著作权',
              count: item.subtitle.CR.count,
              icon: 'icon-gongshichufa',
              router: '/pages/other/zhuzuo/main'
            },
            {
              name: '企业证书',
              count: item.CountInfo.CertificateCount,
              icon: 'icon-gongshangdengji',
              router: '/pages/other/zhengshu/main'
            }
            // {
            //   name: '税务信用',
            //   // count: item.CountInfo.HCCount,
            //   icon: 'icon-caiwushuju',
            //   router: '/pages/other/shuiwu/main'
            // }
          ]
        },
        {
          title: '历史信息',
          children: [
            {
              name: '工商-信息',
              // count: item.CountInfo.HCCount,
              icon: 'icon-gongshangdengji',
              router: '/pages/history/gongshang/main',
              vip: 1
            },
            {
              name: '对外-投资',
              // count: item.subtitle.H_Investment,
              icon: 'icon-guquanchuzhi',
              router: '/pages/history/duiwai/main',
              vip: 1
            },
            {
              name: '历史-股东',
              // count: item.CountInfo.HCCount,
              // count: 0,
              icon: 'icon-gudongxinxi',
              router: '/pages/history/gudong/main',
              vip: 1
            },
            {
              name: '失信-信息',
              // count: item.subtitle.H_Shixin,
              count: 0,
              icon: 'icon-gongshangshixin',
              vip: 1
            },
            {
              name: '被执-行人',
              // count: item.subtitle.H_Zhixing,
              // count: 0,
              icon: 'icon-beizhixingrenxinxichaxun',
              router: '/pages/history/zhixing/main',
              vip: 1
            },
            {
              name: '法院-公告',
              // count: item.subtitle.H_CTA,
              // count: 0,
              icon: 'icon-fayuangonggao',
              router: '/pages/history/fayuan/main',
              vip: 1
            },
            {
              name: '裁判-文书',
              // count: item.subtitle.H_Judgement,
              icon: 'icon-caipanwenshu',
              router: '/pages/history/caipan/main',
              vip: 1
            },
            {
              name: '行政-处罚',
              // count: item.CountInfo.HCCount,
              icon: 'icon-xingzhengfawu',
              router: '/pages/history/xingzheng/main',
              vip: 1
            },
            {
              name: '动产-抵押',
              // count: item.CountInfo.HCCount,
              count: 0,
              icon: 'icon-dongchandiya',
              vip: 1
            },
            {
              name: '开庭-公告',
              // count: item.subtitle.H_CourtNotice,
              icon: 'icon-kaitinggonggao',
              router: '/pages/history/kaiting/main',
              vip: 1
            },
            {
              name: '股权-出质',
              // count: item.CountInfo.HCCount,
              icon: 'icon-guquanchuzhi',
              router: '/pages/history/guquan/main',
              vip: 1
            },
            {
              name: '行政-许可',
              // count: item.CountInfo.HCCount,
              icon: 'icon-gongshixuke',
              router: '/pages/history/xingzhengxuke/main',
              vip: 1
            }
          ]
        }
      ];

      // 公司属性
      this.Company = item.Company;

      // 股东高管
      this.gudong = [...this.Company.Partners, ...this.Company.Employees];

      // 属性数量
      this.CountInfo = item.CountInfo;

      // 缓存到store
      this.$store.commit('setCompanyInfo', item);
    },
    showMore() {
      // 更多信息
      this.$router.push('/pages/other/more/main');
    },
    moreGudong() {
      this.$router.push({
        path: './gdgg/main'
      });
    }
  }
};
</script>